import { useStore } from '@/hooks';
import { Loading } from '@alifd/next';
import React, { useEffect, useState } from 'react';
import LogTimeline from '../LogTimeline';
import { t } from '@lingui/macro';

const TaskLogs = (props) => {
  const { task } = props;
  const [logs, setLogs] = useState([]);
  const { ccTaskStore: store } = useStore();

  useEffect(() => {
    (async () => {
      const data = await store.getLogs(task);
      setLogs(data);
    })();
  }, [task]);

  return (
    <Loading visible={toJS(store.loadingLogs)} style={{ width: '100%', height: '100%' }}>
      <LogTimeline
        title={t`任务日志`}
        dataSource={logs}
      />
    </Loading>
  );
};

export default TaskLogs;
